import { defineComponent, ref, watch, computed, onMounted, onBeforeUnmount, Transition } from 'vue';
import './rotation_1.scss';


const dir = ref('next');
const currentIndex = ref(0);
const data = ref(['https://www.dillonl.com/static/hu.png', 'https://platformapi.leyi123.com/Upload/Personal/c1a7ddf02e6844a29ea9470f0cbcddfb.png']);

const setCurrentIndex = () => {
    switch(dir.value) {
        case 'next':
            currentIndex.value++;
            if(currentIndex.value == data.value.length) {
                currentIndex.value = 0;
            }
            break;
        case 'prev':
            currentIndex.value--;
            if(currentIndex.value == -1) {
                currentIndex.value = data.value.length - 1;
            }
            break;
    }
}

const RotationContainer = defineComponent({
    props: {
        autoplay: {
            type: Boolean,
            default: true,
        },
        duration: {
            type: Number,
            default: 4000,
        },
        isShowDot: {
            type: Boolean,
            default: true,
        },
        isShowDirector: {
            type: Boolean,
            default: true,
        },
        showIndex: {
            type: Number || Undefined,
            default: 0,
        },
        width: {
            type: String || Number,
            default: '100%',
        },
        height: {
            type: String || Number,
            default: '300px',
        },
    },
    setup(props, ctx) {
        const carouselRef =ref(null);
        let timer = null;

        const autoplayHandle = () => {
            if(props.autoplay) {
                timer = setInterval(() => {
                    setCurrentIndex('next')
                }, props.duration)
            }
        }

        onMounted(() => {
            autoplayHandle()
        })
        watch(() => props.autoplay, (value) => {
            if(!value) {
                clearInterval(timer);
                timer = null;
            } else {
                timer = setInterval(() => {
                    setCurrentIndex('next')
                }, props.duration)
            }
        })
        watch(() => props.duration, (value) => {
            clearInterval(timer);
            if(props.autoplay) {
                timer = setInterval(() => {
                    setCurrentIndex('next')
                }, props.duration)
            }
        })
        onBeforeUnmount(() => {
            clearInterval(timer);
            timer = null;
        })
        return () => (
            <div
                class="carousel_container"
                ref={carouselRef}
                style={{
                    width: props.width, height: props.height,
                    backgroundColor: randomColor()
                }}
            >
                {ctx.slots.default()}
            </div>
        )
    }
})
function randomColor() {
    var col = "#";
    for (var i = 0; i < 6; i++) col+=parseInt(Math.random() * 16).toString(16);
    return col;
 }

const RotationItem = defineComponent({
    props: {
        selfIndex: {
            type: Number,
            default: 0,
        }
    },
    setup(props, ctx) {
        const isShow = computed(() => {
            return currentIndex.value == props.selfIndex ;
        })
        return () => (
            <Transition name={dir.value}>
                {isShow.value && <div
                    class="carousel_item_container"
                >
                    {ctx.slots.default()}
                </div>}
            </Transition>
        )
    }
})

const Director = defineComponent({
    props: {
        directorWidth: {
            type: String,
            default: '40px'
        },
        directorHeight: {
            type: String,
            default: '40px'
        },
        directorBackgroundColor: {
            type: String,
            default: '#D8D8D8'
        },
        directorColor: {
            type: String,
            default: '#000'
        },
        directorInterval: {
            type: String,
            default: '10px'
        },
        directorType: {
            type: Boolean,
            default: true
        }
    },
    setup(props, ctx) {

        return () => (<>
            <div
                class="director_left_container"
                style={{
                    width: props.directorWidth,
                    height: props.directorHeight,
                    background: props.directorBackgroundColor,
                    color: props.directorColor,
                    left: props.directorInterval,
                    borderRadius: props.directorType ? '5%' : '50%'
                }}
                onClick={() => {
                    dir.value = 'prev';
                    setCurrentIndex()
                }}
            >&lt;</div>
            <div
                class="director_right_container"
                style={{
                    width: props.directorWidth,
                    height: props.directorHeight,
                    background: props.directorBackgroundColor,
                    color: props.directorColor,
                    right: props.directorInterval,
                    borderRadius: props.directorType ? '5%' : '50%'
                }}
                onClick={() => {
                    dir.value = 'next';
                    setCurrentIndex()
                }}
            >&gt;</div>
        </>)
    }
})

const Dot = defineComponent({
    props: {
        dotNum: {
            type: Number,
            default: 0,
        },
        dotType: {
            type: Boolean,
            default: true,
        },
        isShowNum: {
            type: Boolean,
            default: true,
        },
        dotBottom: {
            type: String,
            default: '10px',
        },
        dotBackgroundColor: {
            type: String,
            default: '#D8D8D8'
        },
        dotActiveBackgroundColor: {
            type: String,
            default: '#fff'
        },
        dotColor: {
            type: String,
            default: '#000'
        },
    },
    setup(props) {
        return () => {
            let dotArray = [];
            for (let i = 0; i < props.dotNum; i++) {
                dotArray.push(
                    <div
                        class={[
                            'dot_container_item',
                            props.dotType ? '' : 'ract',
                            currentIndex.value == i ? 'active' : ''
                        ]}
                        style={{
                            backgroundColor: currentIndex.value == i ? props.dotActiveBackgroundColor : props.dotBackgroundColor,
                            color: props.dotColor,
                        }}
                    >{ props.isShowNum && (i + 1) }</div>
                )
            }
            return (
                <div
                    class="dot_container"
                    style={{
                        bottom: props.dotBottom,
                    }}
                >
                    {dotArray}
                </div>
            )
        }
    }
})

export const Rotation = defineComponent({
    props: {
        backgroundColor: {
            type: String,
            default: '#D8D8D8',
        },
        color: {
            type: String,
            default: '#000',
        },
        autoplay: {
            type: Boolean,
            default: true,
        },
        duration: {
            type: String || Number,
            default: '4',
        },
        showIndex: {
            type: Number,
            default: 0,
        },
        width: {
            type: String || Number,
            default: '100%',
        },
        height: {
            type: String || Number,
            default: '200px',
        },
        // 按钮
        isShowDirector: {
            type: Boolean,
            default: true,
        },
        directorWidth: {
            type: String,
            default: '40px',
        },
        directorHeight: {
            type: String,
            default: '40px',
        },
        directorType: {
            type: Boolean,
            default: true,
        },
        // 底部圆点 
        isShowDot: {
            type: Boolean,
            default: true,
        },
        isShowNum: {
            type: Boolean,
            default: true,
        },
        dotType: {
            type: Boolean,
            default: true,
        },
        dotBottom: {
            type: String,
            default: '10px',
        },
        dotActiveBackgroundColor: {
            type: String,
            default: '#fff'
        },
    },
    setup(props, ctx) {
        
        return () => (
            <RotationContainer
                autoplay={props.autoplay}
                duration={+props.duration * 1000}
                isShowDot={props.isShowDot}
                isShowDirector={props.isShowDirector}
                showIndex={props.showIndex}
                height={props.height + 'px'}
            >
                {
                    data.value.map((item, index) => {
                        return (
                            <RotationItem
                                selfIndex={index}
                                key={index}
                            >
                                <img class="image" src={item} alt="" />
                            </RotationItem>
                        )
                    })
                }
                {
                    props.isShowDirector
                    &&
                    <Director
                        directorWidth={props.directorWidth + 'px'}
                        directorHeight={props.directorHeight + 'px'}
                        directorType={props.directorType}
                        directorBackgroundColor={props.backgroundColor}
                        directorColor={props.color}
                    />
                }
                {
                    props.isShowDot
                    &&
                    <Dot
                        dotNum={data.value.length}
                        isShowNum={props.isShowNum}
                        dotType={props.dotType}
                        dotBottom={props.dotBottom + 'px'}
                        dotBackgroundColor={props.backgroundColor}
                        dotColor={props.color}
                        dotActiveBackgroundColor={props.dotActiveBackgroundColor}
                    />
                }
            </RotationContainer>
        )
    }
})